<template>
	<div>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				购货单位
			</div>
			<div class="main-color v-flex v-col-center mt-[20px]">
				<span class="w-[100px] text-right">单位信息：</span>
				<el-radio-group v-model="radio" class="ml-4">
					<el-radio label="1" size="large">翼凯机械</el-radio>
					<el-radio label="2" size="large">启怡国际</el-radio>
				</el-radio-group>
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="6" >
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">名称：</span>
						<span>上海翼凯机械设备有限公司</span>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]" >
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">纳税人识别号：</span>
						<span>上海翼凯91310104312144281G机械设备有限公司</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6" >
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">地址、电话：</span>
						<span>上海市青浦区朱家角镇盈浦街道万达茂1号楼9</span>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">开户行及账号：</span>
						<span>上海银行股份有限公司浦江高科技园区支行03</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6" >
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">说明：</span>
						<span>说明内容说明内容</span>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				购货产品
			</div>
			<el-table
				class="mt-[20px]"
			    ref="multipleTableRef"
			    :data="lists"
			    style="width: 100%"
			    @selection-change="handleSelectionChange"
				:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}"
			  >
			    <el-table-column label="选择" type="selection" width="55" />
			    <el-table-column label="产品名称" width="120">
			      <template #default="scope">123456789</template>
			    </el-table-column>
				<el-table-column label="规格型号" prop="王小明" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
			    <el-table-column  label="单位" prop="王小明"  align="center"/>
			    <el-table-column label="数量" prop="王小明" align="center" >
			    	<template #default="{row}">
			    		<el-input placeholder="请输入"></el-input>
			    	</template>
			    </el-table-column>
				<el-table-column label="不含税价格" prop="王小明" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
				<el-table-column  label="金额" prop="王小明"  align="center"/>
				<el-table-column  label="增值税率" prop="王小明"  align="center"/>
				<el-table-column label="税额" prop="王小明" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="货物说明" prop="王小明" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
			  </el-table>
			  <div class="mt-[20px]">
				  <span class="main-color">合计：</span>
				  <span class="main-color1">62313</span>
			  </div>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				销货单位
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="6" >
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">名称：</span>
						<span>上海翼凯机械设备有限公司</span>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]" >
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">纳税人识别号：</span>
						<span>上海翼凯91310104312144281G机械设备有限公司</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6" >
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">地址、电话：</span>
						<span>上海市青浦区朱家角镇盈浦街道万达茂1号楼9</span>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">开户行及账号：</span>
						<span>上海银行股份有限公司浦江高科技园区支行03</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6" >
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">说明：</span>
						<span>说明内容说明内容</span>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never" v-for="(item,index) in Data" :key="index">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				开票记录{{index+1}}
			</div>
			<el-table
				class="mt-[20px]"
			    ref="multipleTableRef"
			    :data="lists"
			    style="width: 100%"
			    @selection-change="handleSelectionChange"
				:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}"
			  >
			    <el-table-column label="选择" type="selection" width="55" />
			    <el-table-column label="产品名称" width="120">
			      <template #default="scope">123456789</template>
			    </el-table-column>
				<el-table-column label="规格型号" prop="王小明" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
			    <el-table-column  label="单位" prop="王小明"  align="center"/>
			    <el-table-column label="数量" prop="王小明" align="center" >
			    	<template #default="{row}">
			    		<el-input placeholder="请输入"></el-input>
			    	</template>
			    </el-table-column>
				<el-table-column label="不含税价格" prop="王小明" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
				<el-table-column  label="金额" prop="王小明"  align="center"/>
				<el-table-column  label="增值税率" prop="王小明"  align="center"/>
				<el-table-column label="税额" prop="王小明" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="货物说明" prop="王小明" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
			  </el-table>
			 <el-row class="mt-[20px]" >
			 	<el-col :span="6">
			 		<div class="main-color v-flex">
			 			<span class="w-[100px] text-right">票据快递公司：</span>
			 			<el-input  class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
			 		</div>
			 	</el-col>
			 </el-row>
			 <el-row class="mt-[20px]" >
			 	<el-col :span="6">
			 		<div class="main-color v-flex">
			 			<span class="w-[100px] text-right">快递单号：</span>
			 			<el-input  class="flex-1 ml-[10px] mr-[10px]" placeholder="请输入"></el-input>
						<el-button class="w-[100px] h-[36px]" color="#0054A6" type="primary">查看快递</el-button>
			 		</div>
			 	</el-col>
			 </el-row>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { ElTable } from 'element-plus'
	const radio = ref('1')
	const lists = ref<Array<any>>([
		{},{}
	])
	const multipleTableRef = ref<InstanceType<typeof ElTable>>()
	const multipleSelection = ref<[]>([])
	const handleSelectionChange = (val:[]) => {
	  multipleSelection.value = val
	}
	const Data = ref<Array<any>>([
		{},{}
	])
</script>

<style>
</style>